<template>
  <div class="shophome">
    <header>
      <van-icon name="arrow-left" class="scan" size=".48rem" @click="goBack"/>
      <van-search placeholder="请输入搜索关键词" v-model="searchValue" shape="round" class="search" @keypress="searchKeyWord"/>
      <van-icon name="ellipsis" class="code" size=".48rem" info="99"/>
    </header>
    <notice :top="$remToPx(0.88)" class="not"></notice>
    <div class="shophome_info">
      <van-image
        class="shop_cover"
        width=".8rem"
        height=".8rem"
        fit="cover"
        :src="shopInfo.logo"
        :radius="$remToPx(0.08)"
      />
      <div class="shophome_title">
        <p class="title" @click="toShopDetail">
          <span class="van-ellipsis">{{shopInfo.name}}</span>
          <span class="title_url"><van-icon name="arrow" size=".14rem"/></span>
        </p>
        <span>{{shopInfo.focusUserCount}}关注</span>
      </div>
      <div v-if="isFollow" class="isFollow follow" @click="likeShop(shopInfo.user_id)">已关注</div>
      <div v-else class="unFollow follow"><van-icon name="like-o" @click="likeShop(shopInfo.user_id)"/>关注</div>
    </div>
    <div class="shop_video_box" v-if="shopSociety.length > 0">
      <div>
        <div class="video_item" v-for="(item, index) in shopSociety" :key="index" @click="toVideoDetail(item.id)">
          <p class="van-multi-ellipsis--l2 video_item_title">{{item.content}}</p>
          <div class="video_cover">
            <div class="play_icon_bg"><van-icon name="play" size=".58rem" class="play_icon"/></div>
            <van-image :src="item.cover">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error></template>
            </van-image>
          </div>
        </div>
      </div>
    </div>
    <van-tabs
      v-model="active"
      :offset-top="100"
      :sticky="true"
      title-inactive-color="#333333"
      title-active-color="#FF2A1F"
      class="shop_product_tab goodlist"
      :border="false"
      @change="changeTab"
      :scrollspy="true"
      :animated="true"
      :swipeable="true"
    >
      <van-tab :title="item.cate_name" v-for="(item, index) in shopProductType" :key="index">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
          :offset="100"
          class="loadmore"
        >
          <div class="left">
            <div class="item" v-for="(item, index) in leftList" :key="index" @click="toDetail(item.id)">
              <van-image :src="item.image" class="product_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error></template>
              </van-image>
              <p class="van-multi-ellipsis--l2 item_title">{{item.store_name}}</p>
              <div class="price">
                <span>￥{{item.price}}</span>
                <span>已售{{item.sales}}</span>
              </div>
              <div class="goods_tag" v-if="item.is_good || item.is_new">
                <van-tag v-if="item.is_good" plain color="#FE0000" size="medium">新品</van-tag>
                <van-tag v-if="item.is_new" plain color="#FE0000" size="medium">推荐</van-tag>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="item" v-for="(item, index) in rightList" :key="index" @click="toDetail(item.id)">
              <van-image :src="item.image" class="product_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error></template>
              </van-image>
              <p class="van-multi-ellipsis--l2 item_title">{{item.store_name}}</p>
              <div class="price">
                <span>￥{{item.price}}</span>
                <span>已售{{item.sales}}</span>
              </div>
              <div class="goods_tag" v-if="item.is_good || item.is_new">
                <van-tag v-if="item.is_good" plain color="#FE0000" size="medium">新品</van-tag>
                <van-tag v-if="item.is_new" plain color="#FE0000" size="medium">推荐</van-tag>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchValue: '',
      active: 0,
      leftList: [],
      rightList: [],
      loading: false,
      finished: false,
      shopSociety: [],
      shopProductType: [],
      shopInfo: '',
      page: 1,
      last_page: 100,
      isFollow: 0
    }
  },
  methods: {
    searchKeyWord () {
      console.log(1)
    },
    goBack () {
      if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('popVC')
      } else if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.finish()
      }
    },
    onLoad () {
      if (this.page >= this.last_page) {
        this.finished = true
        this.loading = false
        return false
      }
      this.loading = true
      this.finished = false
      setTimeout(_ => {
        this.page++
        this.getProductList(this.shopProductType[this.active].id).then(res => {
          if (res.status === 200) {
            this.last_page = res.data.last_page
            for (let x in res.data.data) {
              x % 2 === 0 ? this.leftList.push(res.data.data[x]) : this.rightList.push(res.data.data[x])
            }
          }
          this.loading = false
          this.finished = true
        })
      })
    },
    getShopInfo (id) {
      this.$axios.get(`/api/merchant/getMerchantProduct/${id}`).then(res => {
        if (res.status === 200) {
          this.shopInfo = res.data.merchant_info
          this.shopSociety = res.data.social
          this.shopProductType = res.data.categories
          this.isFollow = res.data.merchant_info.focus_user_count
          this.getProductList(this.shopProductType[0].id).then(res => {
            if (res.status === 200) {
              this.last_page = res.data.last_page
              for (let x in res.data.data) {
                x % 2 === 0 ? this.leftList.push(res.data.data[x]) : this.rightList.push(res.data.data[x])
              }
            }
          })
        } else {
          this.$dialog({ message: res.msg })
        }
      })
    },
    getProductList (id) {
      return new Promise(resolve => {
        this.$axios.get('/api/merchantProduct', {
          params: {
            user_id: this.$route.params.id,
            category_id: id,
            keyword: this.searchValue
          }
        }).then(res => {
          resolve(res)
        })
      })
    },
    changeTab (name) {
      this.loading = false
      this.finished = false
      this.page = 1
      this.leftList = []
      this.rightList = []
      this.getProductList(this.shopProductType[name].id).then(res => {
        if (res.status === 200) {
          for (let x in res.data.data) {
            x % 2 === 0 ? this.leftList.push(res.data.data[x]) : this.rightList.push(res.data.data[x])
          }
        }
      })
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    },
    toShopDetail () {
      this.$router.push(`/shopdetail/${this.$route.params.id}`)
    },
    toVideoDetail (id) {
      this.$router.push(`/societyvideo/${id}`)
    },
    likeShop (id) {
      this.$axios.post('/api/user/merchant/focus', {
        merchant_id: id
      }).then(res => {
        if (res.status === 200) {
          this.isFollow = !this.isFollow
          this.$dialog({ message: res.msg })
        }
      })
    }
  },
  created () {
    if (this.$route.params.id > -1) {
      this.getShopInfo(this.$route.params.id)
    } else {
      this.$dialog({ message: '该商户不存在' })
    }
  }
}
</script>

<style lang="scss">
.shophome{
  background: #F6F6F6;
  height: 100%;
  padding-top: .88rem;
  header{
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    padding: .14rem .32rem;
    position: fixed;
    top: 0;
    left: 0;
    font-size: .24rem;
    color: #999999;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .scan, .code{
      width: .44rem;
      height: .44rem;
      color: #999999;
    }
    .search{
      width: 5.36rem;
      height: .6rem;
      padding: 0;
      background: #ffffff !important;
      &>*{
        // background: #ffffff;
        width: 100%;
        border-radius: .36rem;
        height: .6rem;
      }
    }
    .van-cell__value--alone{
      display: flex;
    }
  }
  .shophome_info{
    display: flex;
    padding: .32rem .3rem 0 .16rem;
    align-items: center;
    margin-top: .48rem;
    .shop_cover{
      flex: 0 1 auto;
      margin-right: .16rem;
    }
    .shophome_title{
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
      &>span{
        color: #333333;
        font-size: .24rem;
      }
      .title{
        display: flex;
        font-size: .32rem;
        color: #333333;
        font-weight: 500;
        align-items: center;
        flex: 1;
        &>span:first-child{
          flex: 1;
          max-width: 4rem;
        }
        .title_url{
          display: flex;
          justify-content: center;
          align-items: center;
          width: .24rem;
          height: .24rem;
          border-radius: 1rem;
          border: .02rem solid #999999;
        }
      }
      .title_url{
        margin-left: .16rem;
      }
    }
    .follow{
      width: 1.12rem;
      height: .48rem;
      border-radius: .24rem;
      font-size: .2rem;
      text-align: center;
      line-height: .48rem;
      margin-left: .24rem;
    }
    .isFollow{
      border: .02rem solid #999999;
    }
    .unFollow{
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(90deg,rgba(254,0,0,1) 0%,rgba(255,42,86,1) 100%);
    }
  }
  .shop_video_box{
    margin: .32rem .16rem 0;
    padding: .32rem .16rem;
    background: #ffffff;
    border-radius: .08rem;
    box-sizing: border-box;
    margin-bottom: .24rem;
    &>div{
      overflow: auto;
      display: flex;
    }
    .video_item{
      display: flex;
      flex-direction: column;
      margin-right: .16rem;
      .video_item_title{
        color: #333333;
        font-size: .28rem;
        margin-bottom: .2rem;
        width: 4.4rem;
        height: .76rem;
      }
      .video_cover{
        width: 4.4rem;
        height: 2.58rem;
        border-radius: .08rem;
        overflow: hidden;
        position: relative;
        .van-image{
          width: 4.4rem;
          height: 2.58rem;
        }
        .play_icon_bg{
          position: absolute;
          display: flex;
          width: .58rem;
          height: .58rem;
          justify-content: center;
          align-items: center;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #000000;
          border-radius: 100%;
          z-index: 10;
          .play_icon{
            color: #ffffff;
          }
        }
      }
    }
    .video_item:last-child{
      margin-right: unset;
    }
  }
  .shop_product_tab{
    padding: 0 .16rem;
    .van-tabs__nav{
      background: #f6f6f6;
    }
    .van-tabs__content{
      margin-top: .16rem;
    }
    .item{
      width: 3.52rem;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: .16rem;
      overflow: hidden;
      margin-bottom: .16rem;
      .product_img{
        width: 3.52rem;
        height: 3.52rem;
        border-radius: .16rem .16rem 0 0;
      }
      .item_title{
        color: #000000;
        font-size: .24rem;
        padding: 0 .16rem;
        margin-top: .12rem;
        margin-bottom: .16rem;
      }
      .price{
        padding: 0 .16rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: .12rem;
        span:first-child{
          color: #fe0000;
          font-size: .28rem;
          font-weight: 700;
        }
        span:last-child{
          font-size: .24rem;
          color: #999999;
        }
      }
      .goods_tag{
        padding: 0 .2rem .24rem;
        display: flex;
        span{
          margin-right: .08rem;
        }
      }
    }
  }
  .goodlist{
    padding: 0 .16rem;
    // max-height: calc(100% - .88rem - .48rem - 1.08rem);
    background: #f6f6f6;
    // overflow: auto;
    .loadmore{
      width: 100%;
      .left, .right{
        display: inline-block;
      }
      .right{
        margin-left: .14rem;
        vertical-align: top;
      }
    }
  }
}
.not{
  width: 100%;
  position: fixed;
  top: .88rem;
  z-index: 100;
}
</style>
